<template>
    <div class="infoPanel">
        <div>
          <div class="infoTitle">本月订单量</div>
          <div class="infoNums">
            <span class="infoNum">{{ orderList.length }}</span>
            <span class="infoUnit"></span>
          </div>

        </div>
        <div>
          <div class="infoTitle">本月交易额</div>
          <div class="infoNums">
            <span class="infoNum">{{ (sum / 1000000).toFixed(2) }}</span>
            <span class="infoUnit">万元</span>
          </div>
        </div>

        
      </div>
</template>
<script setup lang="ts">

import http from '@/api/http';
import { env } from '@/utils/env';
import { onMounted, ref } from 'vue';
import { countOrder } from "@/api/orderApi";
const orderList = ref<any[]>([])
const sum = ref(0)
onMounted(async () => {
  let res = await countOrder({})
  orderList.value = res.data
  for(let item of orderList.value){
    sum.value += item.amount
  }
})

</script>
<style scoped lang="scss">

.infoPanel {
    width: 100%;
    position: absolute;
    top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 vw(15) 0;

  >div {
    box-sizing: border-box;
    // border-radius: 10px;
    width: vw(160);
    height: vh(80);
    background: rgba(9, 36, 44, 0.4);
    border: vh(1) solid #43e7ff;
    padding: 0 vw(20) 0px;
    margin: vh(6) 0;
  }

  .infoTitle {
    color: #fff;
    line-height: 3.75vh;
    text-align: center;
    font-size: 1vw;
    padding: 1vh 0;
  }

  .infoNums {
    line-height: vh(20);
    text-align: center;
    color: #2cd7bc;
    font-weight: bold;
  }

  .infoNumss {
    line-height: vh(36);
  }

  .infoNum {
    color: #2cd7bc;
    font-size: vh(24);
    font: SourceHanSansCN-Bold;
  }

  .infoUnit {
    color: #2cd7bc;
    font-size: vh(16);
    font-weight: bold;
    font: SourceHanSansCN-Bold;
    margin-left: vw(4);
  }

  .infoSub {
    font-weight: 400;
    font-size: vh(10);
    color: #adffd7;
    line-height: vh(20);
  }
}

</style>